<template>
    <div>
        <button type="button" class="btn btn-light btn-sm" @click="$router.back()">后退</button>
        <h4 class="text-center">添加用户</h4>

        <form>
            <div class="form-group">
                <label>姓名</label>
                <input type="text" class="form-control" id="InputName" v-model="e_NAME" required>
            </div>

            <div class="form-group">
                <label for="exampleFormControlSelect1">性别</label>
                <select class="form-control" id="Gender" v-model="e_GENDER">
                    <option value="1">男</option>
                    <option value="0">女</option>
                </select>
            </div>

            <div class="form-group">
                <label>出生日期</label>
                <input type="text" class="form-control" id="Birthday" placeholder="yyyy-mm-dd" v-model="e_BIRTH" required>
                <small class="form-text text-muted">日期格式yyyy-mm-dd</small>
            </div>

            <div class="form-group">
                <label>入职日期</label>
                <input type="text" class="form-control" id="Workday" placeholder="yyyy-mm-dd" v-model="e_START" required>
                <small class="form-text text-muted">日期格式yyyy-mm-dd</small>
            </div>

            <div class="form-group">
                <label for="exampleFormControlSelect1">职位</label>
                <select class="form-control" id="job" v-model="e_JOB">
                    <option value="0">一般员工</option>
                    <option value="1">部门经理</option>
                    <option value="2">人事部人员</option>
                    <option value="3">总经理</option>
                </select>
            </div>

            <div class="form-group">
                <label>Password</label>
                <input class="form-control" type="text" value="123456" v-model="e_PASSWORD" readonly>
                <small class="form-text text-muted">新员工密码默认为123456</small>
            </div>

            <div class="form-group">
                <label for="exampleFormControlSelect1">部门</label>
                <select class="form-control" id="department" v-model="e_DEPARTMENT">
                    <option value="1">部门1</option>
                    <option value="2">部门2</option>
                    <option value="3">部门3</option>
                </select>
            </div>

            <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="exampleCheck1" v-model="isChecked" required>
                <label class="form-check-label" for="exampleCheck1">确认信息无误</label>
            </div>

            <button type="submit" class="btn btn-primary" :disabled="!isValid" @click="addUserInfo">Submit</button>
        </form>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name: 'addUser',
    data() {
        return {
            isChecked: false,
            e_NAME: null,
            e_GENDER: null,
            e_BIRTH: null,
            e_START: null,
            e_JOB: null,
            e_PASSWORD: "123456",
            e_DEPARTMENT: null
        }
    },
    computed: {
        isValid() {
            return this.e_DEPARTMENT !== null &&
            this.e_NAME !== null && 
            this.e_GENDER !== null &&
            this.e_BIRTH !==  null &&
            this.e_START !==  null &&
            this.e_JOB !==  null && this.isChecked
        }
    },
    methods: {
        addUserInfo() {
            let inputData = {
                e_NAME: this.e_NAME,
                e_GENDER: this.e_GENDER,
                e_BIRTH: this.e_BIRTH,
                e_START: this.e_START,
                e_JOB: this.e_JOB,
                e_PASSWORD: this.e_PASSWORD,
                e_DEPARTMENT: this.e_DEPARTMENT
            }
            console.log(inputData)
            axios.post('/api/personnel', inputData).then(response => {
                console.log(response)
                let res = response.data.data
                if (res) {
                    alert("添加成功")
                    this.$router.push('/home/users')
                    // this.$confirm('添加成功！', '提示', {
                    //     confirmButtonText: '确定',
                    //     type: 'success'
                    // }).then(() => {
                    //     this.$router.push('/home')
                    // })
                } else {
                    alert("添加失败")
                }
            }).catch(err => {
                alert("添加失败, 请确认信息填写无误")
                console.log(err)
            })
        }
    }
}
</script>

<style lang="less" scoped></style>
  